import React, { Component } from 'react';
import { Button, Modal, Input, Space } from "antd";
import GoBack from '@/components/TheGoBack'

import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { apiView, apiHelpCutpriceRecordPage } from '@/request/marketingTool'

const { Search } = Input;

export default class BargainView extends Component {
    constructor() {
        super()
        this.state = {
            columns_Info: [
                {
                    title: "砍价编号",
                    dataIndex: "dataId",
                    key: "dataId",
                },
                {
                    title: "用户昵称",
                    dataIndex: "dataId",
                    key: "dataId",
                },
                {
                    title: "注册手机号",
                    dataIndex: "dataId",
                    key: "dataId",
                },
                {
                    title: "注册时间",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "主图",
                    dataIndex: "dataSkuImg",
                    key: "dataSkuImg",
                    render: (text, render) => {
                        return text ? <img src={text} style={{ width: 80, height: 80, margin: 'auto' }}></img> : '';
                    },
                },
                {
                    title: "商品名称",
                    dataIndex: "title",
                    key: "title",
                },

                {
                    title: "规格",
                    dataIndex: "skuJson",
                    key: "skuJson",
                    render: (text, render) => {
                        return text ? JSON.parse(text).skuAttribute.map(item => `${item.key}:${item.value}`).join("，") : '';
                    },
                },
                {
                    title: "物料ID",
                    dataIndex: "activityName",
                    key: "activityName",
                },
                {
                    title: "商品原价",
                    dataIndex: "cutPrice",
                    key: "cutPrice",
                    render: (text, render) => {
                        return <React.$Price price={render.cutPrice} />
                    },

                },

                {
                    title: "实付金额",
                    dataIndex: "userNum",
                    key: "userNum",
                    render: (text, render) => {
                        return <React.$Price price={render.userNum} />
                    },
                },

                // {
                //     title: "发起次数",
                //     dataIndex: "userNum",
                //     key: "userNum",
                // }

            ],
            dataSource_Info: [],
            columns_User: [

                {
                    title: "用户昵称",
                    dataIndex: "nickName",
                    key: "nickName",
                },
                {
                    title: "注册手机号",
                    dataIndex: "memberMobile",
                    key: "memberMobile",
                },
                {
                    title: "帮砍时间",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: "砍价金额",
                    dataIndex: "cutPrice",
                    key: "cutPrice",  render: (text, render) => {
                        return <React.$Price price={render.cutPrice} />
                    },
                },
            ],
            dataSource_User: [],
            pageData: {
                pageNo: 1,
                pageSize: 10,
            },
            total: 0,
            refId: '',
            cutId:'',
            currentSku: {}
        }
    }
    componentDidMount() {

        this.setState({
            refId: this.props.match.params.refId,
            cutId: this.props.match.params.cutId,

        }, () => {
            if (this.state.id !== 'null') {
                this.getData(this.props.match.params.cutId)
                this.getUserPage(this.props.match.params.cutId, this.props.match.params.refId)
            }
        })
    }
    async getUserPage(cutId, refId) {
        let { pageSize, pageNo } = this.state.pageData
        await apiHelpCutpriceRecordPage({ cutId:this.state.cutId, refId:this.state.refId ,pageNo,pageSize}).then(res => {
            if (res.code === 0) {
                this.setState({
                    dataSource_User: res.data,
                     total: res.totalCount
                })
            }
        })
    }
    getData(id) {
        apiView({ id }).then(res => {
            if (res.code === 0) {
                let dataSource_Info = [{}]
                Object.keys(res.data).forEach(key => {
                    dataSource_Info[0][key] = res.data[key]
                })
                this.setState({
                    dataSource_Info
                })

            }
        })
    }

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => this.getUserPage())
    }

    render() {
        const { columns_User, dataSource_User, dataSource_Info, columns_Info, pageData, total, } = this.state
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title="" />
                {/* <div style={{ marginTop: 20 }}>
                    <strong >砍价信息</strong>
                    <TheTable style={{ marginTop: 20 }} columns={columns_Info} dataSource={dataSource_Info} />
                </div> */}
                <div style={{ marginTop: 20 }}>
                    <strong >帮砍用户</strong>
                    <TheTable style={{ marginTop: 20 }}
                        scroll={{ x: "max-content", y: '63vh' }}
                        columns={columns_User}
                        dataSource={dataSource_User}
                    />
                    <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
                </div>

            </div>
        );
    }
}
